<template>
  <view class="fund-result"  :style="{ 'background-image': 'url(' + EnumBG.BG1 + ')' }">
     <view class="fund-result-content" :style="{ 'background-image': 'url(' + EnumBG.BU3 + ')' }"> {{yangLaoJin}}元</view>

  </view>
  <view class="agein" @click="toInput" :style="{ 'background-image': 'url(' + EnumBG.BU4 + ')' }">再测一次</view>

  <view>
    <image
      class="tip"
      :class="sizeStatus ? 'tip-big' : 'tip-small'"
      src="/static/fund/tip.png"
      mode="widthFix"
    ></image>
  </view>
</template>

<script setup lang="ts">
import {EnumFund} from "../content";
import { EnumBG } from "@/utils/content";
const emit = defineEmits(['update:defStatus'])
const sizeStatus = ref(false)
interface IProps {
    yangLaoJin:number
    defStatus:EnumFund
}
const startTimer = () => {
  setInterval(() => {
      sizeStatus.value =  !sizeStatus.value
  }, 1000); // 每秒执行一次
};
const toInput = ()=>{
  emit('update:defStatus',EnumFund.STATUS)
}
onMounted(()=>{
  startTimer()
})
withDefaults(defineProps<IProps>(), {})
</script>

<style lang="scss" scoped>
.fund-result{
  position: absolute;
  top: 40%;
  z-index: 102;
  width: 90%;
  height: 400rpx;
  margin: 0 5%;
  background-size: 100% 100%;
  color: rgb(255,193,3);
  font-weight: bolder;
  font-size: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .fund-result-content{
    width: 90%;
    height: 180rpx;
    background-size: 100% 100%;
    line-height: 180rpx;
    text-align: center;
  }
}
.agein{
  position: absolute;
  top: 80%;
  left: 28%;
  z-index: 102;
  color: white;
  width: 300rpx;
  height: 120rpx;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tip{
  position: absolute;
  top: 68%;
  left: 30%;
  z-index: 104;
  width: 400rpx;
  height: 140rpx;
}
.tip-small{
  top: 68%;
  left: 30%;
  z-index: 104;
  width: 400rpx;
  transition: all 1s;
}

.tip-big{
  top: 67%;
  left: 25%;
  z-index: 104;
  width: 450rpx;
  transition: all 1s;
}
</style>

